<template>
  <div class="container">
    <div class="searchbox">
      <el-button size="medium" type="primary" @click="addbtntapfn">
        <i class="el-icon-circle-plus-outline" style="margin-right: 5px"></i>
        添加商品
      </el-button>
      <z-from
        ref="searchfrom"
        class="searchfrom"
        :inline="true"
        :nowdata="searchdata"
        :nowinputs="searchinputs"
      >
        <template #zfromafter>
          <el-form-item style="margin: 0">
            <el-button type="primary" @click="searchfn()">搜索</el-button>
            <el-button type="primary" @click="deletesearchfn()">清空</el-button>
          </el-form-item>
        </template>
      </z-from>
    </div>
    <el-scrollbar>
      <z-table
        v-loading="tableloading"
        :datas="datas"
        style="flex: 1"
        :tablecolumn="tableColumn"
      >
        <template #setting="setting">
          <el-table-column
            align="center"
            :label="setting.itemdata.label"
            :prop="setting.itemdata.value"
          >
            <template #default="scope">
              <el-button
                size="small"
                type="primary"
                @click="Shopwptapfn(scope)"
              >
                操作
              </el-button>
            </template>
          </el-table-column>
        </template>
      </z-table>
    </el-scrollbar>
    <!--        编辑页面-->
    <el-dialog
      v-model="edtdialogfalg"
      :before-close="handleClose"
      :close-on-click-modal="false"
      :title="dialogtitle"
      width="800px"
      @closed="closedfn"
      @opened="openfn"
    >
      <z-from ref="zFrom" :nowdata="nowdata" :nowinputs="nowinputs">
        <template #jeczj="jeczj">
          <el-form-item :label="jeczj.item.label" :prop="jeczj.item.value">
            <el-input v-model="jeczj.formdata[jeczj.item.value]">
              <template #append>
                <el-button>
                  {{ jeczjbfbfn(jeczj.formdata, jeczj.item) }}
                </el-button>
              </template>
            </el-input>
          </el-form-item>
        </template>
        <template #jept="scope">
          <el-form-item :label="scope.item.label" :prop="scope.item.value">
            <el-input
              v-model="scope.formdata[scope.item.value]"
              :disabled="true"
            >
              <template #append>
                <el-button>
                  {{ jeczjbfbfn(scope.formdata, scope.item) }}
                </el-button>
              </template>
            </el-input>
          </el-form-item>
        </template>
      </z-from>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="edtdialogfalg = false">取 消</el-button>
          <el-button
            :loading="edtbtnloading"
            type="primary"
            @click="updatafn(edtbtnloading)"
          >
            确 定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
  import zTable from '@/components/zTable/index'
  import zFrom from '@/components/zFrom/zFrom'
  // import { ElMessage } from 'element-plus'
  export default {
    components: {
      zFrom,
      zTable,
    },
    data() {
      return {
        tableloading: false,
        edtbtnloading: false,
        updatas: [],
        datas: [],
        nowpage: '',
        nowdata: {},
        nowinputs: [],
        tableColumn: [
          { label: '商品主图', value: 'pic1', type: 'image' },
          { label: '商品名称', value: 'mc' },
          {
            label: '商品价格',
            value: 'je',
            fl: 100,
          },
          {
            label: '投放区域',
            value: 'tfarea',
            type: 'select',
            options: [
              { label: '指定设备', value: '0' },
              { label: '全国投放', value: '1' },
            ],
          },
          {
            label: '是否上线',
            value: 'b_use',
            type: 'select',
            options: [
              { label: '草稿', value: '0' },
              { label: '提交审核', value: '1' },
              {
                label: '投放使用',
                value: '2',
              },
              { label: '审核不通过', value: '3' },
            ],
          },
          { label: '操作', value: 'setting' },
        ],
        edtdialogfalg: false,
        dialogtitle: '',
        edtinputs: [
          { value: 'mc', label: '商品名称' },
          {
            value: 'je',
            label: '商品价格',
            dw: '元',
            type: 'number',
            fl: 100,
            rule: [
              { required: true, message: '请输入商品价格', trigger: 'blur' },
              {
                required: true,
                pattern: this.$z.test.amount(),
                message: '金额显示错误',
                trigger: 'blur',
              },
              //       required: true,
              // pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9.·-]+$/,
              // message: '姓名不支持特殊字符',
              // trigger: 'blur'
            ],
          },
          {
            value: 'dz',
            label: '商铺地址',
            type: 'mpt',
            mptzd: 'wz',
          },
          {
            value: 'pic',
            label: '商品图片',
            type: 'imgs',
            values: ['pic1', 'pic2', 'pic3', 'pic4', 'pic5'],
          },
          { value: 'mr', label: '商品描述', type: 'wangeditor' },
          {
            value: 'jeczj',
            label: '赠送积分',
            type: 'number',
            defaultValue: 5,
            dw: '% 0个',
            xs: '1',
          },
          {
            value: 'jept',
            label: '服务费',
            type: 'button',
            defaultValue: '5',
            dw: '% 0元',
            xs: '1',
          },
          {
            value: 'typesh',
            label: '送货类型',
            type: 'select',
            option: [
              { label: '送货上门', value: '0' },
              { label: '上门提货', value: '1' },
              { label: '全国包邮', value: '2' },
            ],
          },
          {
            value: 'type',
            label: '商品类型',
            type: 'select',
            option: [
              { label: '车辆服务', value: '0' },
              { label: '生活服务', value: '1' },
              { label: '生活用品', value: '2' },
              { label: '生鲜水果', value: '3' },
              { label: '特价促销', value: '4' },
              { label: '其他', value: '5' },
            ],
            mr: '0',
          },
          {
            value: 'tfarea',
            label: '投放区域',
            type: 'select',
            option: [
              { label: '投放指定设备', value: '0' },
              {
                label: '全国投放',
                value: '1',
                if: [{ zd: 'typesh', zhi: ['2'] }],
              },
            ],
          },
        ],
        searchdata: {},
        searchinputs: [
          { value: 'mc', placeholder: '商品名称' },
          {
            placeholder: '是否上线',
            value: 'b_use',
            type: 'select',
            option: [
              { label: '全部', value: '' },
              { label: '草稿', value: '0' },
              { label: '提交审核', value: '1' },
              {
                label: '投放使用',
                value: '2',
              },
              { label: '审核不通过', value: '3' },
            ],
          },
          // 是否上线
        ],
      }
    },
    mounted() {
      this.getdata()
    },
    methods: {
      getdata() {
        this.tableloading = true
        this.$z.$axios.post('/Shopwp').then((e) => {
          this.updatas = e.data.reverse()
          this.tableloading = false
          this.searchfn()
        })
      },
      searchdatafn() {},
      Shopwptapfn(scope) {
        this.dialogtitle = '查看详情'
        this.nowinputs = this.edtinputs
        this.nowdata = scope.row[Symbol.for('data')]
        this.edtdialogfalg = !this.edtdialogfalg
        this.nowpage = 'edt'
      },
      addbtntapfn() {
        this.dialogtitle = '添加商品'
        this.nowinputs = this.edtinputs
        this.nowdata = {}
        this.edtdialogfalg = !this.edtdialogfalg
        this.nowpage = 'add'
      },
      openfn() {
        this.$refs.zFrom.settingfn()
      },
      closedfn() {
        this.nowdata = {}
        this.nowinputs = []
        this.$refs.zFrom.settingfn()
      },
      handleClose() {
        this.edtdialogfalg = !this.edtdialogfalg
      },
      updatafn() {
        this.$refs.zFrom.validate().then((updata) => {
          this.edtbtnloading = true
          let upurl = this.nowpage == 'add' ? '/Shopwpadd' : '/Shopwpedt'
          if (this.nowpage == 'add') {
            updata['b_use'] = updata['tfarea']
          }
          // { params:  }
          this.$z.$axios.post(upurl, updata).then((reqdata) => {
            let { data } = reqdata
            let par = this.$z.parfn(data)
            if (par.value == 'succeed') {
              this.$message.success(par.label)
              this.edtdialogfalg = false
              this.getdata()
            } else {
              this.$message.error(par.label)
            }
            this.edtbtnloading = false
          })
        })
      },
      jeczjbfbfn(formdata, item) {
        let je = parseFloat(formdata.je)
        if (!formdata || !item || !je || !formdata[item.value]) {
          return ''
        }
        let r = 0
        je = this.$z.math.multiply(je, 100)
        if (je <= 0) {
          return ''
        }
        r = this.$z.math.multiply(je, formdata[item.value])
        r = this.$z.math.divide(r, 100)
        r = parseInt(r) <= 0 ? 1 : parseInt(r)
        return item.value == 'jeczj'
          ? `% ${r}个`
          : `% ${this.$z.math.divide(r, 100)}元`
      },
      searchfn() {
        this.$refs.searchfrom.validate().then((updata) => {
          this.datas = this.updatas.filter((e) => {
            for (let i = 0; i < this.searchinputs.length; i++) {
              let dqinput = this.searchinputs[i],
                v =
                  e[dqinput.value] || e[dqinput.value] == 0
                    ? e[dqinput.value]
                    : ''
              if (dqinput.type == 'select') {
                if (
                  updata[dqinput.value] &&
                  updata[dqinput.value] != '' &&
                  updata[dqinput.value] != v
                ) {
                  return false
                }
              } else {
                if (
                  updata[dqinput.value] &&
                  updata[dqinput.value] != '' &&
                  v.indexOf(updata[dqinput.value]) < 0
                ) {
                  return false
                }
              }
            }
            return true
          })
        })
      },
      deletesearchfn() {
        this.searchdata = {}
        this.$refs.searchfrom.settingfn()
        this.datas = this.$z.deepClone(this.updatas)
      },
    },
  }
</script>
<style lang="scss" scoped>
  @import 'src/styles/index';

  .container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /*background: #00ff00;*/
    display: flex;
    flex-direction: column;
    background: $background-color;
    border: 10px solid $background-color;
    border-top: 0;
  }

  .searchbox {
    background: #ffffff;
    margin-bottom: 10px;
    padding: 10px;
    border-radius: 4px;
    display: flex;
    align-items: center;

    .searchfrom {
      flex: 1;
      padding-left: 10px;
    }
  }

  /*.el-table--border td:first-child .cell, .el-table--border th:first-child .cell{*/
  /*    text-align: center;*/
  /*}*/
</style>
